<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test: JavaScript event handlers on overlapping, positioned regions with non-auto z-index</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
		<meta name="flags" content="ahem">
		<meta name="assert" content="Test checks that JavaScript event handlers set on regions trigger
		when multiple regions are absolutely positioned, overlap and have non-auto z-index.">
		<style>
		#content {
			font-family: Ahem;
			font-size: 20px;
			line-height: 1em;
			color: lime;
			flow-into: f;
		}
		
		.region {
			position: absolute;
			top: 50px;
			left: 50px;
			width: 60px;
			height: 60px;
			border-left: 20px solid lime;
			background-color: green;
			overflow: hidden;
			flow-from: f;
		}
		.region p {
			height: 50%;
			background-color: red;
		}

		#front {
			height: 40px;
			left: 90px;
			top: 90px;
			z-index: 42;
			border-left-color: orange;
		}
		#front:hover {
			border-color: black;
		}
		#middle {
			left: 30px;
			top: 70px;
			z-index: 32;
			border-left-color: lightblue;
		}
		#back {
			left: 70px;
			z-index: 16;
			border-left-color: yellow;
		}

		#region-container {
			position: relative;
		}
		</style>
	</head>
	<body>
		<ol>
			<li>You should see no red or the word "FAIL".</li>
			<li>Move the mouse over the orange rectangle.</li>
			<li>The orange rectangle should turn black.</li>
			<li>Click on the black rectangle.</li>
			<li>You should see the word "PASS", in green, below.</li>
		</ol>
		<div id="content">
			<div id="block1">
				xxx<br>xxx<br>xxx
			</div>
			<div id="block2">
				xxx<br>xxx<br>xxx
			</div>
			<div id="block3">
				xxx<br>xxx<br>xxx
			</div>
		</div>

		<div id="region-container">
			<div class="region" id="back">
				<p>&nbsp;</p>
			</div>
			<div class="region" id="front">
				<p>&nbsp;</p>
			</div>
			<div class="region" id="middle">
				<p>&nbsp;</p>
			</div>
		</div>
		<div id="result"></div>

		<script>
		var result = document.querySelector("#result");

		function successHandler() {
			console.log("this")
			result.innerHTML = "PASS";
			result.style.color = "green";
		}
		function failHandler() {
			console.log("that")
			result.innerHTML = "FAIL";
			result.style.color = "red";
		}

		if (document.querySelector(".region p").getBoundingClientRect().width == 0) {
			document.addEventListener("DOMContentLoaded", function() {
				document.querySelector("#front").addEventListener("click", successHandler);

				document.querySelector("#middle").addEventListener("click", failHandler);
				document.querySelector("#back").addEventListener("click", failHandler);
			});
		} else {
			failHandler();
		}
		</script>
	</body>
</html>